import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Layout, Menu, Breadcrumb } from 'antd';
import {routes} from './config'
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {Route, Switch,Redirect ,Link} from 'react-router-dom'
const Home = () => (
  <div>
    <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>User</Breadcrumb.Item>
        <Breadcrumb.Item>Tom</Breadcrumb.Item>
    </Breadcrumb>
    <h2>Tom</h2>
  </div>
);

const Category = () => (
  <div>
    <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>User</Breadcrumb.Item>
        <Breadcrumb.Item>Bill</Breadcrumb.Item>
    </Breadcrumb>
    <h2>Bill</h2>
  </div>
);

const Products = () => (
  <div>
    <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>User</Breadcrumb.Item>
        <Breadcrumb.Item>Alex</Breadcrumb.Item>
    </Breadcrumb>
    <h2>Alex</h2>
  </div>
);
const Team1 = () => (
  <div>
    <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Team</Breadcrumb.Item>
        <Breadcrumb.Item>Team 1</Breadcrumb.Item>
    </Breadcrumb>
    <h2>Team1</h2>
  </div>
);
const Team2 = () => (
  <div>
    <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Team</Breadcrumb.Item>
        <Breadcrumb.Item>Team 2</Breadcrumb.Item>
    </Breadcrumb>
    <h2>Team 2</h2>
  </div>
);



const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  render() {
    const { collapsed } = this.state;
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <SubMenu key="sub1" icon={<UserOutlined />} title="User">
              <Menu.Item key="3"><Link to="/user/tom" >Tom</Link></Menu.Item>
              <Menu.Item key="4"><Link to="/user/bill">Bill</Link></Menu.Item>
              <Menu.Item key="5"><Link to="/user/alex">Alex</Link></Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
              <Menu.Item key="6"><Link to="/team/team1" >Team 1</Link></Menu.Item>
              <Menu.Item key="8"><Link to="/team/team2">Team 2</Link></Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            {/* <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb> */}
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              <Switch>
                {
                  routes.map((item) => {
                    return <Route key={item.path} path={item.path} component={item.component}></Route>
                  })
                }
                <Redirect from='/' to='/user/tom' exact></Redirect>
              </Switch>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }
}

export default SiderDemo;